<template>
	<view>
		<view class="map-wrap" style="position: relative;">
			<!-- #ifdef APP-PLUS || H5 -->
			<view id="map-box"></view>
			<!-- #endif -->
			<nav id="listing-group" class="listing-group">
				<label for="scrollZoom" class="green" @click="getRTP()">
					<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="22" color="#eee">
					</uni-icons>
					<view>定位</view>

				</label>
				<label for="boxZoom" class="green">
					<uni-icons custom-prefix="iconfont" type="icon-qiye" size="22" color="#eee">
					</uni-icons>
					<view>企业</view>
				</label>

				<label for="dragRotate" class="green">
					<uni-icons custom-prefix="iconfont" type="icon-zerenqu" size="22" color="#eee">
					</uni-icons>
					<view>责任区</view>
				</label>

				<label for="dragPan" class="green">
					<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
					</uni-icons>
					<view>巡查点</view>
				</label>
			</nav>
			<!---->
			<nav id="listing-groups" class="listing-groups">
				<label for="scrollZoom" class="green" @click="getRTP()">
					<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="22" color="#eee">
					</uni-icons>
					<view>定位</view>

				</label>
				<label for="boxZoom" class="green">
					<uni-icons custom-prefix="iconfont" type="icon-qiye" size="22" color="#eee">
					</uni-icons>
					<view>企业</view>
				</label>

				<label for="dragRotate" class="green">
					<uni-icons custom-prefix="iconfont" type="icon-zerenqu" size="22" color="#eee">
					</uni-icons>
					<view>责任区</view>
				</label>

				<label for="dragPan" class="green">
					<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
					</uni-icons>
					<view>巡查点</view>
				</label>
			</nav>






			<u-popup :show="show" @close="close" @open="open">
				<view>
					<text>
						<u-search shape="square" style="padding: 15px;"></u-search>
						<!-- 导航栏 -->
						<view class="cu-list grid solids-bottom col-4 no-border">
							<view class="cu-item" v-for="(item, index) in categories" :key="index"
								@click="getMapClick(item.id)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" :type="item.icon" size="18"
										style="line-height: 24px;">
									</uni-icons>
								</view>
								<text class="txtfont">{{item.name}}</text>
							</view>
						</view>
					</text>
				</view>
			</u-popup>

			<!--详情页弹出框-->
			<u-popup :show="show1" @close="close1" @open="open1">
				<view class="order cu-from-group-wei">
					<view style="height: 580px; background-color: rgb(255 255 255);">
						<!--告警表单-->
						<view class="styone">
							<view>事故统计</view>
							<view style="font-size: 14px;">2021年11月21日 15:23:24</view>
							<view>事故等级:较大事故</view>
							<view>矿山企业:企业名称企业名称企业名称</view>
							<view>
								<image src="/static/YCL2.0.png" class="u-image-error">
							</view>
							<!-- <image v-if="zt" src="@/static/ycl.png" class="imgWH">
							</image> -->
						</view>

						<view class="cu-form-group">
							<view class="title fontsize-P">事故类别</view>
							<input placeholder="一般" name="input" disabled="disabled" placeholder-class="cl"></input>
						</view>

						<view class="cu-form-group">
							<view class="title fontsize-P">死亡人数</view>
							<input placeholder="李志伟" name="input" disabled="disabled" placeholder-class="cl"></input>
						</view>
						<view class="cu-form-group align-start">
							<view class="title fontsize-P">
								事故原因</view>
							<textarea maxlength="-1" disabled="disabled" placeholder-class="cl"
								placeholder="备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注"></textarea>
						</view>
						<view class="cu-form-group">
							<view class="title fontsize-P">事故描述</view>
							<input placeholder="注备注备注备注事故描述.事故描述.事故描述,事故描述.事故描述" name="input" disabled="disabled"
								placeholder-class="cl"></input>
						</view>
						<view class="cu-form-group">
							<image src="/static/logoAPP.png" style="height: 85px; width: 85px; float: right;">
								<image src="/static/logoAPP.png" style="height: 85px; width: 85px; float: right;">
									<image src="/static/logoAPP.png" style="height: 85px; width: 85px; float: right;">
						</view>
						<view>
							<u-button text="查看详情" type="primary"
								color="linear-gradient(90deg, #1E579A 0%, #2A6AB6 100%)"
								style="width: 650rpx; margin: 20PX auto;" shape="circle" @click="submit">
							</u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script module="mapbox" lang="renderjs">
	//import mapboxgl from "mapbox-gl"; // 引包方式二
	// import 'mapbox-gl/dist/mapbox-gl.css';
	// const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
	// import MapboxLanguage from '@mapbox/mapbox-gl-language'
	// import 'static/mapbox-gl-cgcs2000.css'
	// import mapboxgl from 'static/mapbox-gl-cgcs2000.js'

	export default {
		data() {
			return {
				// zt: "",
				map: null, //地图实例
				popup: null,
				popup2: null,
				popup6: null,
				el: null,
				marker: null,
				marker1: null,
				marker2: null,
				marke6: null,
				marke7: null,
				categories: [{
						id: 1,
						icon: "icon-yitihuajiankong",
						name: '隐患分布'
					},
					{
						id: 2,
						icon: "icon-yitihuajiankong",
						name: '事故分布'
					},
					{
						id: 3,
						icon: "icon-yitihuajiankong",
						name: '监控设备'
					},
					{
						id: 4,
						icon: "icon-yitihuajiankong",
						name: '监测设备'
					}
				]

			}
		},

		mounted() {
				if (typeof window.mapboxgl === 'function') {
				this.$nextTick(() => {
					this.initMap()
				})
			} else {
				const script = document.createElement('script')
				script.src = 'http://1.85.55.225:8085/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js';
				script.onload = this.initMap.bind(this);
				document.head.appendChild(script)
			}
			// this.iocnOne()
			// this.$nextTick(() => {
			// 	this.initMap()
			// })
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show1 = false
				// console.log('close');
			},

			// 场景地图初始化
			initMap() {
				mapboxgl.accessToken =
					'pk.eyJ1IjoiZmxvd2Vyd2VpIiwiYSI6ImNsYXo3NnN3MDE3ZTUzcGxpNzNncGxxdWYifQ.AWmbnSDKRxSygXxsAkMF9Q';
				// 创建地图
				// 英文标注转换为中文   
				// mapboxgl.setRTLTextPlugin(
				// 	"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
				// );

				this.map = new mapboxgl.Map({
					container: 'map-box', // container ID
					// style: 'mapbox://styles/mapbox/satellite-v9', // style加载地图的样式
					style: 'http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/YXSL-225.json', // style加载地图的样式
					// style: '/static/YXSL-225.json',
					//style: 'mapbox://styles/mapbox/dark-v5',
					center: [109, 35.655], // 设置地图的中心点
					projection: 'globe', // 把地图设置为球体
					zoom: 6, // starting zoom
					pitch: 5,
					minZoom: 5,
					maxZoom: 17,
					// minZoom: 5, // 图层的最小缩放级别
					// maxZoom: 17 // 图层的最大缩放级别
				})
				// 设置语言
				// var language = new MapboxLanguage({
				// 	defaultLanguage: "zh-Hans"
				// });
				// this.map.addControl(language);
				this.map.on("load", () => {
					// 创建 marker1弹出框
					this.popup = new mapboxgl.Popup({
						offset: 15,

					}).setHTML(
						` <div class="hover-popup" >
					            <div style="font-size:14px; color:#333">                    
					              <div style="margin-top:5px"><span style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">陕西省安康矿业xxx公司</span></div>
								   <button style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;">四级风险</button>
								    <button style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;">在营</button>
					              <div style="margin-top:5px"><span style="color: #595959;">地址：</span><span>安康市旬阳县XX街道</span></div>
								   <div style="margin-top:5px"><span style="color: #595959;">负责人：</span><span>安康市旬阳县XX街道</span></div>
								    <div style="margin-top:5px"><span style="color: #595959;">联系方式：</span><span>安康市旬阳县XX街道</span></div>
					            </div>
					      </div>
					        `
					).setOffset(0);

					// 创建 marke2弹出框
					this.popup2 = new mapboxgl.Popup({
						offset: 15,
					}).setHTML(
						` <div class="hover-popup" >
					            <div style="font-size:14px; color:#333">                    
					              <div style="margin-top:5px"><span style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">陕西省安康矿业xxx公司</span></div>
								   <button style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;">四级风险</button>
								    <button style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;">在营</button>
					              <div style="margin-top:5px"><span style="color: #595959;">地址：</span><span>安康市旬阳县XX街道</span></div>
								   <div style="margin-top:5px"><span style="color: #595959;">负责人：</span><span>安康市旬阳县XX街道</span></div>
								    <div style="margin-top:5px"><span style="color: #595959;">联系方式：</span><span>安康市旬阳县XX街道</span></div>
					            </div>
					      </div>
					        `
					).setOffset(0);
					// 标注点
					this.marker1 = new mapboxgl.Marker({
						color: '#EF9E6A',
						top: '500',
						// color it red
					}).setLngLat([108.76815, 36.82177]).setPopup(this.popup).addTo(this.map);
					// 	color: '#EF9E6A' // color it red
					// }).setLngLat([-66.96466, 44.8097]).addTo(this.map);
					this.marke2 = new mapboxgl.Marker({
						color: '#EF9E6A',
						top: '500',
						// color it red
					}).setLngLat([108.17611, 36.92785]).setPopup(this.popup2).addTo(this.map);



					// 视频监控画面
					// 创建视频div
					const popup6 = new mapboxgl.Popup({
						offset: 25
					}).setHTML(
						` <div class="hover-popup" >
					           <video autoplay="true" style="height: 162px; width: 203px; object-fit: cover"
					           	controls="controls" object-fit="contain" id="myVideo"
					           	src="https://www.runoob.com/try/demo_source/movie.mp4"
					           	></video>
					      </div>
					        `
					).setOffset(0)
					const el5 = document.createElement('div');
					// el5.style.backgroundColor = '#000'
					el5.style.backgroundImage = "url('/static/spjk.png')"
					//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
					el5.style.width = 52 + "px"
					el5.style.height = 52 + "px"

					el5.id = 'marker';
					// create the marker
					this.marke6 = new mapboxgl.Marker(el5)
						.setLngLat([108, 36])
						.setPopup(popup6) // sets a popup on this marker
						.addTo(this.map);




					//监测设备
					const popup7 = new mapboxgl.Popup({
						offset: 25
					}).setHTML(
						`  <div class="hover-popup" >
					            <div style="font-size:14px; color:#333">  				 
					              <div><span><image src="/static/jksbtb.png" width="32px" height="32px" style="vertical-align: middle; "></image></span><p style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 55px;
    display: inline-block; margin-left: 10px;">监测设备001</p></div>
	                               <div style="font-size: 14px; color: #333; background-color: #e1eefd; padding: 10px; border-radius: 21px; ">  		
								   <button style="background-color: #E1EEFD; color:#225EA4; border: none; line-height: 10px;
    border-right: 1px solid #5383bb; ">温度:<span style="font-weight: 900; font-style: italic;">20</span></button>
								    <button style="background-color: #E1EEFD; color:#225EA4; border: none;line-height: 10px;
    border-right: 1px solid #5383bb; ">湿度:<span style="font-weight: 900; font-style: italic;">67</span></button>
									<button style="background-color: #E1EEFD; color:#225EA4; line-height: 10px;
    border-right: 1px solid #5383bb; border: none;border-radius: 50px;">降雨量:<span style="font-weight: 900; font-style: italic;">0.02</span></button>
					              </div>
					            </div>
					      </div>
					        `
					).setOffset(0)
					// create DOM element for the marker
					const el6 = document.createElement('div');
					// el5.style.backgroundColor = '#000'
					el6.style.backgroundImage = "url('/static/spjc.png')"
					//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
					el6.style.width = 40 + "px"
					el6.style.height = 30 + "px"
					el6.id = 'marker';
					// create the marker
					this.marke6 = new mapboxgl.Marker(el6)
						.setLngLat([108.76815, 36.087])
						.setPopup(popup7) // sets a popup on this marker
						.addTo(this.map);




					// 事故事件
					// 事故事件
					const popup8 = new mapboxgl.Popup({
						offset: 25
					}).setHTML(
						` 					       
					<view style="width: 391px;background-color: #ffffff;margin: 11px auto;border-radius: 8px;box-sizing: border-box;font-size: 15px; height: 651px;box-shadow: 0px 3px 10px 0px rgb(148 177 188 / 38%); padding: 0px 5px 0px 5px;">
									<div style="height: 468px; background-color: rgb(255 255 255);">
										<!--告警表单-->
										<div style="background-image: linear-gradient(to right, #D36554,#E37757); color: #EEE; line-height: 30px;padding: 15px; font-size: 16px;">
											<div style="line-height: 22px; font-size: 20px;">事故统计</div>
											<div style="font-size: 14px; color: #dbbebe;">2021年11月21日 15:23:24</div>
											<div style="font-size: 16px;">事故等级:较大事故</div>
											<div style="font-size: 16px;">矿山企业:企业名称企业名称企业名称</div>
											<div>
												<image src="/static/YCL2.0.png" style="width: 108px;height: 56px;position: absolute;right: 14px;border-right: none; border-radius: 20px 0px 0px 20px;margin-top: -123px;">
											</div>
											<!-- <image v-if="zt" src="@/static/ycl.png" class="imgWH">
											</image> -->
										</div>
								
										<div class="cu-form-group" style="justify-content: start; min-height: 40px;">
											<div class="title fontsize-P" style="color: #808080;">事故类别</div>
											<P>高处坠落</p>
										</div>
										<div class="cu-form-group" style="justify-content: start; min-height: 40px;">
											<div class="title fontsize-P" style="color: #808080;">死亡人数</div>
											<P>1人</p>
										</div>
										<div class="cu-form-group" style="justify-content: start;  min-height: 40px;">
											<div class="title fontsize-P" style="color: #808080; width: 108px; ">事故原因</div>
											<P>指派无登高架设作业操作,无登高架设作业操作</p>
										</div>
										<div class="cu-form-group" style="justify-content: start;  min-height: 40px;">
											<div class="title fontsize-P" style="color: #808080; width: 108px;">事故描述</div>
											<P>指派无登高架设作业操作,无登高架设作业操作</p>
										</div>
											
										<p style="color: #808080; font-size: 16px; padding-left: 16px; line-height: 25px;">影像资料</P>																																									
										<div class="cu-form-group">
											<div><image src="/static/logobj.png" style="height: 72px; width: 95px; float: right; padding: 2px;"></div>
										    <div><image src="/static/logobj.png" style="height: 72px; width: 95px; float: right; padding: 2px;"></div>
											<div><image src="/static/logobj.png" style="height: 72px; width: 95px; float: right; padding: 2px;"></div>
										</div>
										<div>
											<button type="primary" color="linear-gradient(90deg, #1E579A 0%, #2A6AB6 100%)" style="border: none; border-radius: 29px; width: 300px;height: 36px; background-color: #df7356; color: #fff;  margin: 15px 11px" shape="circle" @click="submit">
												查看详情
											</button>
										</div>
									</div>
								</div>		   
							`
					).setOffset(0)

					const el7 = document.createElement('div');
					// el5.style.backgroundColor = '#000'
					el7.style.backgroundImage = "url('/static/spsg.png')"
					//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
					el7.style.width = 40 + "px"
					el7.style.height = 40 + "px"
					el7.id = 'marker';
					// create the marker
					this.marke7 = new mapboxgl.Marker(el7)
						.setLngLat([108.76, 37.89])
						.setPopup(popup8) // sets a popup on this marker
						.addTo(this.map);








					// 隐患事件
					const popup9 = new mapboxgl.Popup({
						offset: 25
					}).setHTML(
						` 					       
					<view style="width: 391px;background-color: #ffffff;margin: 11px auto;border-radius: 8px;box-sizing: border-box;font-size: 15px; height: 651px;box-shadow: 0px 3px 10px 0px rgb(148 177 188 / 38%); padding: 0px 5px 0px 5px;">
									<div style="height: 468px; background-color: rgb(255 255 255);">
										<!--告警表单-->
										<div style="background-image: linear-gradient(to right, #5493BA,#67B0CB); color: #EEE; line-height: 30px;padding: 15px; font-size: 16px;">
											<div style="line-height: 22px; font-size: 20px;">隐患事件</div>
											<div style="font-size: 14px; color: #b3d8e8;">2021年11月21日 15:23:24</div>
											<div style="font-size: 16px;">隐患等级:重大隐患</div>
											<div style="font-size: 16px;">矿山企业:企业名称企业名称企业名称</div>
											<div>
												<image src="/static/YCL2.0.png" style="width: 108px;height: 56px;position: absolute;right: 14px;border-right: none; border-radius: 20px 0px 0px 20px;margin-top: -123px;">
											</div>
											<!-- <image v-if="zt" src="@/static/ycl.png" class="imgWH">
											</image> -->
										</div>
								
										<div class="cu-form-group" style="justify-content: start; min-height: 40px;">
											<div class="title fontsize-P" style="color: #808080;">上报人员</div>
											<P>李志伟</p>
										</div>
										<div class="cu-form-group" style="justify-content: start; min-height: 40px;">
											<div class="title fontsize-P" style="color: #808080;">隐患类型</div>
											<P>火灾隐患</p>
										</div>
										<div class="cu-form-group" style="justify-content: start;  min-height: 40px;">
											<div class="title fontsize-P" style="color: #808080; width: 108px; ">隐患来源</div>
											<P>A矿区可能卫火灾隐XXXXX</p>
										</div>
								
										<p style="color: #808080; font-size: 16px; padding-left: 16px; line-height: 25px;">影像资料</P>																																									
										<div class="cu-form-group">
											<div><image src="/static/logobj.png" style="height: 72px; width: 95px; float: right; padding: 2px;"></div>
										    <div><image src="/static/logobj.png" style="height: 72px; width: 95px; float: right; padding: 2px;"></div>
											<div><image src="/static/logobj.png" style="height: 72px; width: 95px; float: right; padding: 2px;"></div>
										</div>
										<div>
											<button type="primary" color="linear-gradient(90deg, #1E579A 0%, #2A6AB6 100%)" style="border: none; border-radius: 29px; width: 300px;height: 36px; background-image: linear-gradient(to right, #1E579A, #2A6AB6); color: #fff;  margin: 15px 11px" shape="circle" @click="submit">
												查看详情
											</button>
										</div>
									</div>
								</div>		   
							`
					).setOffset(0)
					// create DOM element for the marker
					const el10 = document.createElement('div');
					// el5.style.backgroundColor = '#000'
					el10.style.backgroundImage = "url('/static/sp4.png')"
					//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
					el10.style.width = 42 + "px"
					el10.style.height = 42 + "px"
					el10.id = 'marker';
					// create the marker
					this.marke8 = new mapboxgl.Marker(el10)
						.setLngLat([109.76, 37.89])
						.setPopup(popup9) // sets a popup on this marker
						.addTo(this.map);
					// this.imageAdd()
					// this.layerAdd()
					// 聚合点
					// 添加数据源
					// this.map.addSource("earthquakes", {
					// 	type: "geojson",
					// 	data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
					// 	cluster: true,
					// 	clusterMaxZoom: 14,
					// 	clusterRadius: 50
					// })

					// 添加圆形聚合图层
					// this.map.addLayer({
					// 	id: "clusters",
					// 	type: "circle", //实心圆
					// 	source: "earthquakes",
					// 	filter: ["has", "point_count"],
					// 	paint: {

					// 		"circle-color": [
					// 			"step",
					// 			["get", "point_count"],
					// 			"#30c14f",
					// 			100,
					// 			"#f1f075",
					// 			750,
					// 			"#f28cb1"
					// 		],
					// 		"circle-radius": [
					// 			"step",
					// 			["get", "point_count"],
					// 			20,
					// 			100,
					// 			30,
					// 			750,
					// 			40
					// 		]
					// 	}
					// })

					// 添加数字图层
					// this.map.addLayer({
					// 	id: "cluster-count",
					// 	type: "symbol",
					// 	source: "earthquakes",
					// 	filter: ["has", "point_count"],
					// 	layout: {
					// 		"text-field": "{point_count_abbreviated}",
					// 		"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
					// 		"text-size": 12
					// 	}
					// })

					// 添加未聚合图层
					// this.map.addLayer({
					// 	id: "unclustered-point",
					// 	type: "circle", //绘制实心圆
					// 	source: "earthquakes",
					// 	filter: ["!", ["has", "point_count"]],
					// 	paint: {
					// 		"circle-color": "#FF0000",
					// 		"circle-radius": 4,
					// 		"circle-stroke-width": 5,
					// 		"circle-stroke-color": "#FF0000"
					// 	}
					// })

					// 点击聚合图层地图级别中心点变化
					// this.map.on('click', 'clusters', function(e) {
					// 	console.log("xxx", e)
					// 	// 找到这个点上的所有特征 map.queryRenderedFeatures
					// 	var features = this.map.queryRenderedFeatures(e.point, {
					// 		layers: ['clusters']
					// 	});
					// 	console.log('features', features);
					// 	var clusterId = features[0].properties.cluster_id;
					// 	this.map.getSource('earthquakes').getClusterExpansionZoom(clusterId, function(err,
					// 		zoom) {
					// 		if (err) return;

					// 		this.map.easeTo({
					// 			center: features[0].geometry.coordinates,
					// 			zoom: zoom
					// 		});
					// 	});

					// 	// 获取当前聚合点下一级子元素
					// 	this.map.getSource('earthquakes').getClusterChildren(clusterId, (error,
					// 		features) => {
					// 		if (!error) {
					// 			console.log('Cluster children:', features);
					// 		}
					// 	});

					// 	// 获取当前聚合点下边的所有子元素
					// 	let allFeatures = [];
					// 	const getFeatures = (id) => {
					// 		this.map.getSource('earthquakes').getClusterChildren(id, (error,
					// 			features) => {
					// 			features.forEach(feature => {
					// 				const {
					// 					id = ''
					// 				} = feature;
					// 				id && getFeatures(id);
					// 				!id && allFeatures.push(feature);
					// 				console.log('allFeatures', allFeatures);
					// 			});
					// 		});
					// 	};

					// 	getFeatures(clusterId);
					// })

					// 聚合图层鼠标移入样式
					// this.map.on('mouseenter', 'clusters', function(e) {
					// 	console.log('cluster', e);
					// 	this.map.getCanvas().style.cursor = 'pointer';
					// })
					// // 聚合图层鼠标移出鼠标样式
					// this.map.on('mouseleave', 'clusters', function() {
					// 	this.map.getCanvas().style.cursor = '';
					// })
					// let popup = new mapboxgl.Popup({
					// 	className: 'my-class'
					// })
					// 未聚合图层鼠标移入pop框显示
					// this.map.on('mouseenter', 'unclustered-point', function(e) {
					// 	console.log(e)
					// 	// 改变鼠标样式
					// 	this.map.getCanvas().style.cursor = 'pointer';
					// 	let features = e.features[0].properties;
					// 	popup.setLngLat(e.lngLat)
					// 	popup.setHTML(`<h3>id: ${features.id}</h3><h3>time: ${features.time}</h3>`)
					// 	popup.setMaxWidth("300px")
					// 	popup.addTo(this.map);
					// })
					// // 未聚合图层鼠标移出pop框隐藏
					// this.map.on('mouseleave', 'unclustered-point', function() {
					// 	// 改变鼠标样式
					// 	this.map.getCanvas().style.cursor = '';
					// 	popup.remove();
					// })

					// this.map.addLayer({
					// 	'id': 'terain-data',
					// 	'type': 'line', //图层类型 面图层
					// 	// "source-layer": "water", //加载矢量切片
					// 	// 'source': 'mapbox-terrain', // 引用数据源
					// 	'layout': {
					// 		'line-join': 'round',
					// 		'line-cap': 'round'
					// 		// 'visiblity': 'visible' //绘制区域显示不显示 visible显示 none不显示
					// 	},
					// 	'paint': {
					// 		'line-color': '#FFFFFF', // 蓝色填充
					// 		'line-width': 2,

					// 	},
					// 	// minZoom: 1, // 当图层的的最小缩放级别
					// 	// maxZoom: 2 // 当图层的的最大缩放级别
					// })

					// 巡查点
					this.map.addSource('places', {
						'type': 'geojson',
						'data': {
							'type': 'FeatureCollection',
							'features': [{
									'type': 'Feature',
									'properties': {
										'description': '<strong style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">巡查点</strong><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查人员:李志伟</p><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查时间:2022-10-12</p><p> <button style="background-color: #235c9f; color:#eee; border: none; width: 260px; height: 32px;  border-radius: 50px; line-height: 15px;">查看详情</button></p > '
									},
									'geometry': {
										'type': 'Point',
										'coordinates': [108.72, 34.35]
									}
								},
								{
									'type': 'Feature',
									'properties': {
										'description': '<strong style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">巡查点</strong><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查人员:李志伟</p><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查时间:2022-10-12</p><p> <button style="background-color: #235c9f; color:#eee; border: none; width: 260px; height: 32px;  border-radius: 50px; line-height: 15px;">查看详情</button></p > '
									},
									'geometry': {
										'type': 'Point',
										'coordinates': [108.07, 34.28]
									}
								},
								{
									'type': 'Feature',
									'properties': {
										'description': '<strong style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">巡查点</strong><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查人员:李志伟</p><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查时间:2022-10-12</p><p> <button style="background-color: #235c9f; color:#eee; border: none; width: 260px; height: 32px;  border-radius: 50px; line-height: 15px;">查看详</button></p > '
									},
									'geometry': {
										'type': 'Point',
										'coordinates': [108.48, 34.30]
									}
								},

								{
									'type': 'Feature',
									'properties': {
										'description': '<strong style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">巡查点</strong><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查人员:李志伟</p><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查时间:2022-10-12</p><p> <button style="background-color: #235c9f; color:#eee; border: none; width: 260px; height: 32px;  border-radius: 50px; line-height: 15px;">查看</button></p > '
									},
									'geometry': {
										'type': 'Point',
										'coordinates': [109.43286, 35.76076]
									}
								},
								{
									'type': 'Feature',
									'properties': {
										'description': '<strong style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">巡查点</strong><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查人员:李志伟</p><p style="color:#999; font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC; color: #343434; line-height: 28px;">巡查时间:2022-10-12</p><p> <button style="background-color: #235c9f; color:#eee; border: none; width: 260px; height: 32px;  border-radius: 50px; line-height: 15px;">查看</button></p > '
									},
									'geometry': {
										'type': 'Point',
										'coordinates': [107.15, 34.38]
									}
								}

							]
						}
					})
					// 添加一个显示位置的层
					this.map.addLayer({
						'id': 'places',
						'type': 'circle',
						'source': 'places',
						'layout': {
							// Make the layer visible by default.
							'visibility': 'visible'
						},
						'paint': {
							'circle-color': '#FF0000',
							'circle-radius': 6,
							'circle-stroke-width': 2,
							'circle-stroke-color': '#c4554c'
						}
					})

					// 创建一个弹出窗口，但不要将其添加到地图
					const popup = new mapboxgl.Popup({
						//	closeButton: true,
						closeOnClick: false
					})

					this.map.on('mouseenter', 'places', (e) => {
						// Change the cursor style as a UI indicator.
						this.map.getCanvas().style.cursor = 'pointer';

						// Copy coordinates array.
						const coordinates = e.features[0].geometry.coordinates.slice();
						const description = e.features[0].properties.description;

						// Ensure that if the map is zoomed out such that multiple
						// copies of the feature are visible, the popup appears
						// over the copy being pointed to.
						while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
							coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
						}

						// Populate the popup and set its coordinates
						// based on the feature found.
						popup.setLngLat(coordinates).setHTML(description).addTo(this.map);
					});

					this.map.on('mouseleave', 'places', () => {
						this.map.getCanvas().style.cursor = '';
						popup.remove();
					});



					//多边形区域
					this.map.addSource('maine', {
						'type': 'geojson',
						'data': {
							'type': 'Feature',
							'geometry': {
								'type': 'Polygon',
								// These coordinates outline Maine.
								'coordinates': [
									[
										[109.26333, 35.58357],
										[109.84259, 35.58349],
										[110.17196, 36.04732],
										[109.43286, 35.76076],
										[109.43286, 35.76076],
										[107.15, 34.38],
										[108.95, 34.27],
										[109.5, 34.52],
										[109.26333, 35.58357],

									]
								]
							}
						}
					})
					//添加一个新图层可视化多边形
					this.map.addLayer({
						'id': 'maine',
						'type': 'fill', //图层类型 面图层
						// "source-layer": "water", //加载矢量切片
						'source': 'maine', // 引用数据源
						'layout': {
							// 'visiblity': 'visible' //绘制区域显示不显示 visible显示 none不显示
						},
						'paint': {
							'fill-color': '#FFFFFF', // 蓝色填充
							'fill-opacity': 0.5,

						},
						// minZoom: 1, // 当图层的的最小缩放级别
						// maxZoom: 2 // 当图层的的最大缩放级别
					})
					// 在多边形周围添加一个黑色的轮廓
					this.map.addLayer({
						'id': 'outline',
						'type': 'line',
						'source': 'maine',
						'layout': {
							// 'visiblity': 'none'
							'line-join': 'round' //线条圆角
						},
						'paint': {
							'line-color': '#eeeeee',
							'line-width': 2
						}
					})

					// 绘制线
					// this.map.addLayer({
					// 	'id': 'line-animation',
					// 	'type': 'line',
					// 	'source': 'maine',
					// 	'layout': {
					// 		'line-cap': 'round',
					// 		'line-join': 'round'

					// 	},
					// 	'paint': {
					// 		'line-color': '#ed6498',
					// 		'line-width': 5,
					// 		'line-opacity': 0.8
					// 	}
					// })
					// 绘制点
					// this.map.addLayer({
					// 	'id': 'symbol',
					// 	'type': 'symbol',
					// 	'source': 'maine',
					// 	'layout': {
					// 		'line-cap': 'round',
					// 		'line-join': 'round'

					// 	}
					// })
					// 绘制园
					// this.map.addLayer({
					// 	'id': 'pointId',
					// 	'type': 'circle', //图层类型 面图层
					// 	// "source-layer": "water", //加载矢量切片
					// 	'source': 'maine', // 引用数据源
					// 	'layout': {
					// 		'visiblity': 'visible' //绘制区域显示不显示 visible显示 none不显示
					// 	},
					// 	'paint': {
					// 		'circle-color': '#ed6498',
					// 		//多个点渲染不同的颜色
					// 		// 'circle-radius': ['get', 'size'],
					// 		'circle-stroke-width': 1, //边框
					// 		'circle-stroke-color': '#fff', //边框颜色

					// 	},
					// 	// minZoom: 1, // 当图层的的最小缩放级别
					// 	// maxZoom: 2 // 当图层的的最大缩放级别
					// })

				});
			},




			// 获取当前位置的经纬度
			// getRTP() {
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: (res) => {
			// 			console.log('当前位置的经度：' + res.longitude);
			// 			console.log('当前位置的纬度：' + res.latitude);
			// 		}
			// 	});
			// }
			// 添加图层
			// layerAdd() {

			// },
			// 添加图层图片
			// imageAdd() {
			// 	// 巡检起点icon
			// 	this.map.loadImage("/static/images/tabbar/dt.png", (error, image) => {
			// 		this.map.addImage("route_start", image);
			// 	});
			// 	// 巡检终点icon
			// 	this.map.loadImage("/static/images/tabbar/dt.png", (error, image) => {
			// 		this.map.addImage("route_end", image);
			// 	});
			// },
			// 获取当前位置的经纬度
			getRTP() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}



		}
	}
</script>
<script>
	export default {
		data() {
			return {
				show: false,
				show1: false, // 地图弹出框， 在安卓端必须写在script 而非 script module="mapbox" lang="renderjs"里面
				keyword: '遥看瀑布挂前川', //搜索框
				categories: [{
						id: 1,
						icon: "icon-yitihuajiankong",
						name: '隐患分布'
					},
					{
						id: 2,
						icon: "icon-yitihuajiankong",
						name: '事故分布'
					},
					{
						id: 3,
						icon: "icon-yitihuajiankong",
						name: '监控设备'
					},
					{
						id: 4,
						icon: "icon-yitihuajiankong",
						name: '监测设备'
					}
				]

			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			open1() {
				// console.log('open');
			},
			close1() {
				this.show1 = false
				// console.log('close');
			},


			iocnOne() {
				this.show = true
			},
			iocnTWO() {
				this.show1 = true
			},
			// 隐患事件分布



		}
	}
</script>
<style lang="scss" scoped>
	.map-wrap {
		position: relative;
		min-width: 100vw;
		min-height: 100vh;
	}

	#map-box {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;

	}


	/*地图定位样式*/
	.listing-group {
		font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-weight: 600;
		position: absolute;
		top: 154px;
		right: 10px;
		z-index: 1;
		border-radius: 3px;
		max-width: 12%;
		color: #fff;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 68px;
		opacity: 0.8;
		height: 268px;
		padding: 10px;
		display: inline-grid;
	}

	.listing-group input[type='checkbox']:first-child+label {
		border-radius: 3px 3px 0 0;
	}

	.listing-group label:last-child {
		border-radius: 0 0 3px 3px;
		border: none;
	}

	.listing-group input[type='checkbox'] {
		display: none;
	}

	.listing-group input[type='checkbox']+label {
		background-color: #3386c0;
		display: block;
		cursor: pointer;
		padding: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	}

	.listing-group input[type='checkbox']+label {
		background-color: #3386c0;
		text-transform: capitalize;
	}

	.listing-group input[type='checkbox']+label:hover,
	.listing-group input[type='checkbox']:checked+label {
		background-color: #4ea0da;
	}

	.listing-group input[type='checkbox']:checked+label:before {
		content: '✔';
		margin-right: 5px;
	}




	/*地图定位样式*/
	.listing-groups {
		font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-weight: 600;
		position: absolute;
		top: 50px;
		left: 10px;
		z-index: 1;
		border-radius: 3px;
		max-width: 12%;
		color: #fff;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 68px;
		opacity: 0.8;
		height: 268px;
		padding: 10px;
		display: inline-grid;
	}

	.listing-groups input[type='checkbox']:first-child+label {
		border-radius: 3px 3px 0 0;
	}

	.listing-groups label:last-child {
		border-radius: 0 0 3px 3px;
		border: none;
	}

	.listing-groups input[type='checkbox'] {
		display: none;
	}

	.listing-groups input[type='checkbox']+label {
		background-color: #3386c0;
		display: block;
		cursor: pointer;
		padding: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	}

	.listing-groups input[type='checkbox']+label {
		background-color: #3386c0;
		text-transform: capitalize;
	}

	.listing-groups input[type='checkbox']+label:hover,
	.listing-groups input[type='checkbox']:checked+label {
		background-color: #4ea0da;
	}

	.listing-groups input[type='checkbox']:checked+label:before {
		content: '✔';
		margin-right: 5px;
	}







	.lin-w {
		display: block;
		line-height: 36px;
	}

	.green {
		text-align: center;
		width: 33px;
		line-height: 24px;
	}

	uni-image>div,
	uni-image>img {
		width: 38%;
		height: 38%;
		margin-top: 94px;
		margin-left: 105px;
	}

	.fontsize-P {
		color: #919191;
	}

	.fontsize_p {
		color: #6c6c6c;

	}

	::v-deep .cu-form-group+.cu-form-group {
		border-top: 0px solid #eee;
	}

	.cu-from-group-wei {
		transition-duration: 300ms;
		transition-timing-function: ease-out;
		z-index: 10075;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		padding: 12PX;
		padding-bottom: 0PX;
	}

	.styone {
		background-image: linear-gradient(to right, rgb(83, 146, 185), rgb(107, 183, 207));
		color: #EEE;
		line-height: 30px;
		padding: 15px;
		font-size: 16px;
	}

	.u-image-error {
		width: 108px;
		height: 56px;
		position: absolute;
		right: 32px;
		/* background-color: #123; */
		/* background: linear-gradient(to right, #2A62A5, #5192DF); */
		// border: 1px solid #004CA7;
		border-right: none;
		border-radius: 20px 0px 0px 20px;
		margin-top: -114px;
	}

	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 5px;
		color: #343434;
		font-size: 14px;
		line-height: 22px;
	}

	::v-deep .mapboxgl-popup-content {
		color: #000;
		background-color: #fff;
		border-color: #fff;
		padding: 10px 10px 10px;
		max-width: 320px;
		box-shadow: 0px 0px 0px #fff;
		font-family: 'Oswald';
		width: 800rpx;

	}
</style>
